<template>
  <div class="container">
      
    <div class="item" v-for="(item, index) in billList" :key="index">
      <div class="store_name">
        <span style="color: orange">[店铺]</span> {{ item.storeName }}
      </div>
      <div class="main">
        <div class="image">
          <img :src="item.productVo.path" alt="" />
        </div>
        <div class="info">
          <div class="product_name">
            <span style="color: #f2c85c">[产品名称]</span>
            {{ item.productVo.name }}
          </div>
          <div class="product_province">
            <span style="color: #f2c85c">[产品产地]</span>
            {{ item.productVo.province }} - {{ item.productVo.city }} - {{ item.productVo.county }}
          </div>
          <div class="product_description">
            <span style="color: #f2c85c">[商家描述]</span>
            {{ item.productVo.description }}
          </div>
          <div class="buy_time">
            <span style="color: #f2c85c">[下单时间]</span>
            {{ item.createTime }}
          </div>
        </div>
        <div class="right">
            <div class="state">
                {{item.state}}
            </div>
            <div class="price">
                {{item.productVo.price}} <span style="font-size: 20px">￥</span>
            </div>
        </div>
        <div class="right_button">
             <el-button type="success" plain @click="lunch(item)" v-if="item.state=='尚未发货'">我已发货</el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      billList: [],
    };
  },
  created() {
    this.$http({
      url: "/user/getBillVoByBusinessId",
      method: "get",
    }).then((res) => {
      this.billList = res;
    });
  },
  methods: {
      lunch(item) {
          this.$alert('确认已发货吗？','提示', {
              confirmButtonText: '确定',
              callback: action => {
                  if (action == 'confirm') {
                      this.$http({
                          url: '/user/billLunch',
                          method: 'get',
                          params: {
                              billId: item.id
                          }
                      }).then(res => {
                          if (res == 1) {
                              this.$message.success('发货成功')
                              this.$router.go(0)
                          }
                      })
                  }
              }
          })
      }
  }
};
</script>


<style scoped>
.container {
  width: 60%;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.item {
  height: 150px;
  border-radius: 5px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 25px;
  padding-right: 25px;
  box-shadow: 1px 1px 3px #c9c7c7;
}

.store_name {
  flex: 1;
  color: #303133;
  font-weight: 250;
  letter-spacing: 2px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.main {
  flex: 5;
  display: flex;
}

.image {
  flex: 1;
}

.image img {
  width: 100%;
  height: 100%;
}

.info {
  flex: 3;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.info .product_name {
  margin-left: 10px;
  flex: 1;
}

.product_province {
  margin-left: 10px;
  flex: 1;
}

.product_description {
  margin-left: 10px;
  flex: 1;
}

.buy_time {
  margin-left: 10px;
  flex: 1;
}

.right {
  flex: 2;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.state {
    flex: 1;
    color: rgb(122, 167, 235);
    font-size: 12px;
}

.price {
    flex: 1;
    color: rgb(231, 66, 37);
    font-size: 20px;
}
</style>